<template>
	<view class="container">
		<u-navbar bgColor="#0e3a5e" :title="data.title" :autoBack="true" :placeholder="true" leftIconColor="#fff"
			:titleStyle="data.titleStyle">
		</u-navbar>
		<view class="mescroll-contend">
			<view class="pdBox">
				<view class="charts">
					<view class="charts-name" v-if="!data.tabList.length">
						<view class="charts-name-title">
							<view class="point-box">
								<view class="point">

								</view>
							</view>
							<view class="name">
								{{data.title}}
							</view>
						</view>
					</view>
					<u-tabs :list="data.tabList" @change="changeTabs" :current="data.current"  lineWidth="0"
						lineColor="#4980FD" :activeStyle="{
					             color: '#4980FD',
					             fontWeight: 'bold',
					             transform: 'scale(1.05)',
					         }" :inactiveStyle="{
					             color: '#606266',
					             transform: 'scale(1)'
					         }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
					</u-tabs>
					
					<view class="chartPosition" v-if=" data.chartData&& data.chartData.chartData">

						<view class="top chartName">
							<text class="unit">{{data.chartData.chartData.chartName}}</text>
							<text class="unit">{{data.chartData.chartData.chartUnit}}</text>
						</view>
						<view class="chart" :style="{'height':'300px'}">
							<qiun-data-charts type="column" :opts="data.opts" :chartData="data.chartData.chartData"
								:ontouch="true" :disableScroll="false" :animation='false' />
						</view>

					</view>
					<view class="outsideData" v-if="data.chartData&& data.chartData.outsideData">
						<uni-table ref="table" border stripe emptyText="暂无更多数据" v-if="data.detailsData.dateType=='DAY'">
							<uni-tr>
								<uni-th width="120" align="center">装备编号</uni-th>
								<uni-th width="120" align="center">日产值</uni-th>
								<uni-th width="120" align="center">日增长率（%）</uni-th>
								<uni-th width="120" align="center">日进度（%）</uni-th>
								<uni-th width="120" align="center">总产值</uni-th>
								<uni-th width="120" align="center">总进度（%）</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in data.chartData.outsideData" :key="index">
								<uni-td align="center">{{ item.equipmentNumber }}</uni-td>
								<uni-td align="center">{{ item.dayOutputValue }}</uni-td>
								<uni-td align="center">{{ item.dayAddPercent }}</uni-td>
								<uni-td align="center">{{ item.dayProgress }}</uni-td>
								<uni-td align="center">{{ item.totalOutputValue }}</uni-td>
								<uni-td align="center">{{ item.totalProgress }}</uni-td>

							</uni-tr>
						</uni-table>
						<uni-table ref="table" border stripe emptyText="暂无更多数据" v-if="data.detailsData.dateType=='WEEK'">
							<uni-tr>
								<uni-th width="120" align="center">装备编号</uni-th>
								<uni-th width="120" align="center">周产值</uni-th>
								<uni-th width="120" align="center">周增长率（%）</uni-th>
								<uni-th width="120" align="center">周进度（%）</uni-th>
								<uni-th width="120" align="center">总产值</uni-th>
								<uni-th width="120" align="center">总进度（%）</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in data.chartData.outsideData" :key="index">
								<uni-td align="center">{{ item.equipmentNumber }}</uni-td>
								<uni-td align="center">{{ item.weekOutputValue }}</uni-td>
								<uni-td align="center">{{ item.weekAddPercent }}</uni-td>
								<uni-td align="center">{{ item.weekProgress }}</uni-td>
								<uni-td align="center">{{ item.totalOutputValue }}</uni-td>
								<uni-td align="center">{{ item.totalProgress }}</uni-td>
						
							</uni-tr>
						</uni-table>
						<uni-table ref="table" border stripe emptyText="暂无更多数据" v-if="data.detailsData.dateType=='MONTH'">
							<uni-tr>
								<uni-th width="120" align="center">装备编号</uni-th>
								<uni-th width="120" align="center">月产值</uni-th>
								<uni-th width="120" align="center">月增长率（%）</uni-th>
								<uni-th width="120" align="center">月进度（%）</uni-th>
								<uni-th width="120" align="center">总产值</uni-th>
								<uni-th width="120" align="center">总进度（%）</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in data.chartData.outsideData" :key="index">
								<uni-td align="center">{{ item.equipmentNumber }}</uni-td>
								<uni-td align="center">{{ item.monthOutputValue }}</uni-td>
								<uni-td align="center">{{ item.monthAddPercent }}</uni-td>
								<uni-td align="center">{{ item.monthProgress }}</uni-td>
								<uni-td align="center">{{ item.totalOutputValue }}</uni-td>
								<uni-td align="center">{{ item.totalProgress }}</uni-td>
						
							</uni-tr>
						</uni-table>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { reactive } from "vue";
	import { onShow, onLoad, onUnload } from "@dcloudio/uni-app";

	import {  outputValuesecond, quantityCountsecond } from '@/api/manage/manage.js'

	const data : any = reactive({
		type: '',
		title: '',
		opts: {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 10, 0, 15],
			enableScroll: true,
			legend: {},
			xAxis: {
				disableGrid: true,
				scrollShow: true,
				itemCount: 6
			},
			yAxis: {

			},
			extra: {
				line: {
					type: "straight",
					width: 5,
					activeType: "hollow"
				},
				column: {
					width: 20,
				}
			}
		},

		titleStyle: {
			color: '#fff',
			fontSize: '34rpx',
			fontWeight: '600'
		},

		detailsData: null,
		chartData: null,
		chartDataQ:null,
		tabList:[],
		current:0
	});
	onLoad(() => {
		uni.$on('getDetails', (e) => {
			data.detailsData = e || {};
			data.type = data.detailsData.type;
			console.log(data.detailsData)
			setTitle(data.detailsData.type)
			getoutputValuesecond()
		})
	})
	onShow(() => {

	});
	onUnload(() => {
		uni.$off('getDetails')
	})
	const setTitle = (type) => {
		switch (type) {
			case 'outputValue':
				data.title = '产值数据';
				break;
			case 'quantityCount':
				data.title = '质量数据';
				break;
			default: ''
		}
	}
	//获取详情数据
	const getoutputValuesecond = async () => {
		try {

			const params = {
				year: data.detailsData.year,
				month: data.detailsData.month,
				dateType: data.detailsData.dateType,
				dataKey: data.detailsData.dataKey,
				dataOrgId: data.detailsData.dataOrgId,
			}
			console.log(data.detailsData.dataOrgId)
			if (data.type == 'outputValue') {
				const res = await outputValuesecond(params)
				data.chartData = res.data
			} else if (data.type == 'quantityCount') {
				const res = await quantityCountsecond(params)
				data.chartDataQ = res.data;
				const tabList=Object.keys(data.chartDataQ)||[];
				tabList.map(item=>{
					data.tabList.push({name:item})
				})
				setChartData()
			}

		} catch (e) {
			//TODO handle the exception
		}
	}
	const changeTabs=(e)=>{
		data.current=e.index;
		setChartData()
	}
	const setChartData=()=>{
		data.chartData=data.chartDataQ[data.tabList[data.current].name]
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F9;
	}
	::v-deep .uni-table{
		// min-width: 100% !important;
	}
	.pdBox-flex-pointBox {
		display: flex;
		flex-direction: column;
	}

	::v-deep .stickyBox {
		background-color: #F5F5F9;

		.user {
			box-shadow: 0px 11px 17px 0px #EEEEEE;
			border: 1px solid #EEEEEE;
		}

	}

	.pdBox {

		&-flex {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			&-pointBox {
				display: flex;
				flex: 1;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
				box-shadow: 0px 11px 17px 0px #EEEEEE;

				.point {
					width: 18rpx;
					height: 18rpx;
					background: #00C290;
					border-radius: 6rpx;
				}

				&.ml {
					margin-left: 26rpx;
				}

				.grid-box {
					box-shadow: none;
					padding: 0;

					.name {
						justify-content: flex-start;

						text {
							padding-left: 20rpx;
						}
					}

					.number {
						justify-content: flex-start;
						padding-left: 40rpx;

					}
				}

				.value {
					color: #00C290
				}

				&.color2 {
					.point {
						background: #FF4A4A;
					}

					.value {
						color: #FF4A4A
					}
				}

				&.color3 {
					.point {
						background: #FF9B00;
					}

					.value {
						color: #FF9B00
					}
				}

				&.color4 {
					.point {
						background: #7C67FF;
					}

					.value {
						color: #7C67FF
					}
				}

				&.color5 {
					.point {
						background: #B8ACFF;
					}

					.value {
						color: #B8ACFF
					}
				}

			}
		}


	}

	.grid-box {
		// width: 100%;
		background-color: #FFFFFF;
		flex: 1;
		box-shadow: 0rpx 5rpx 10rpx 3rpx #EEEEEE;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		padding: 16rpx;

		&.flexCen {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 0;

			.number {
				padding: 0;

				.value {
					color: #000;
				}
			}
		}

		.u-fade-enter-to {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&.ml {
			margin-left: 20rpx;
		}

		.name {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}

		.number {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			padding: 10rpx 0;

			h1 {
				font-size: 54rpx;
			}

			span {
				font-size: 32rpx;
			}

			.value {
				font-weight: bold;
			}
		}
	}

	.pdBox-card {
		background-color: #fff;
		padding: 26rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 11px 17px 0px #EEEEEE;

		.pdBox-flex {
			margin: 0;

		}

		.grid-box {
			box-shadow: none;
			border: 1rpx solid #4980FD;

		}
	}

	.pdBox-tabs {
		margin-bottom: 30rpx;
	}


	.charts {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0px 11px 17px 0px #EEEEEE;

		.charts-name {
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			padding: 20rpx 0;

			&-title {
				display: flex;
				align-items: center;
			}

			.more {
				font-size: 30rpx;
			}

			.name {
				font-weight: bold;
			}

			.point-box {
				position: relative;
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;

				.point {
					width: 16rpx;
					height: 16rpx;
					background: #2776FF;
					border-radius: 50%;

					position: relative;
					z-index: 2;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				&::before {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					content: '';
					z-index: 1;
					width: 40rpx;
					height: 40rpx;
					background: rgba(212, 231, 253, 1);
					border-radius: 50%;
					// margin-right:10rpx;
				}
			}

		}

		.charts-selete {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.charts-years {
				flex: 1;
			}

			.timeList {
				flex: 1;
				display: flex;
				align-items: center;

				// margin-left: 60rpx;
				.u-scroll-list {
					padding-bottom: 0;
				}

				.timeItem {
					padding: 10rpx 34rpx;
					background-color: #F5F8FF;
					color: #969595;
					border-radius: 10rpx;
					margin-right: 20rpx;
					overflow: hidden;

					&.ac {
						background-color: #1C8EFF;
						color: #fff;
					}
				}
			}
		}

		.chartPosition {
			.chartName {
				font-size: 30rpx;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.unit {
				margin-left: 20rpx;
			}
		}

		.chart {
			margin-bottom: 20rpx;
		}
	}

	.charts-years {
		font-size: 32rpx;
		font-weight: bold;
	}
</style>